import React from 'react';
import styles from './index.module.less';

const withBase = (Component) => {
  return class WithBaseComponent extends React.Component {
    state = {
      focused: false,
    };

    render() {
      return (
        <div
          tabIndex="0"
          onFocus={() => {
            this.setState({ focused: true });
          }}
          onBlur={() => {
            this.setState({ focused: false });
          }}
          className={styles.root}
        >
          <Component {...this.props} {...this.state} />
        </div>
      );
    }
  };
};

export default withBase;
